﻿<template>
  <baseConfigUI :config.sync="config" :events.sync="events">
    <el-form-item>
      <el-switch
        style="display: block"
        v-model="config.other.showPageNavigation"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="显示翻页器"
        inactive-text="不显示翻页器">
      </el-switch>
    </el-form-item>
    <el-form-item>
      <el-switch
        style="display: block"
        v-model="config.other.activeSave"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="启用保存"
        inactive-text="不启用保存">
      </el-switch>
    </el-form-item>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="数据源设定" name="dataSource" v-if="config.other.dataSource">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据属性</span>
          </div>
          <div style="padding: 0 0 5px 0">
            <el-radio-group v-model="config.other.dataSource.remoteCategory">
              <el-radio-button label="Meta">元数据表</el-radio-button>
              <el-radio-button label="API">API</el-radio-button>
              <el-radio-button label="Custom">自定义</el-radio-button>
            </el-radio-group>
          </div>
          <div v-if="config.other.dataSource.remoteCategory === 'Meta'">
            <table-source-meta-config :config.sync="config" @metaChanged="handleMetaChanged"></table-source-meta-config>
          </div>
          <div v-if="config.other.dataSource.remoteCategory === 'API'">
            <el-form-item>
              <el-button type="primary" @click="fetchColumnInfo4API">自动获取栏位信息</el-button>
            </el-form-item>
            <tableSourceAPIConfig :config.sync="config" @apiChanged="handleAPIChanged"></tableSourceAPIConfig>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="栏位设定" name="columns">
        <div class="clearfix">
          <el-button style="float: right; padding: 3px 0" type="text" @click="addColumns()">添加</el-button>
        </div>
        <div>
          <el-table :data = 'config.other.columns' max-height="300" style = "width:100%" empty-text = "暂无数据" border stripe>
            <el-table-column align = "center" fixed :key="Math.random()" prop = 'name' label = '栏位名称'>
              <template slot-scope="scope">
                <el-input v-model = "scope.row.name" clearable placeholder = '请输入' @change="changName(scope.row)"></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'title' label = '栏位描述'>
              <template slot-scope="scope">
                <el-input v-model = "scope.row.title" clearable placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'ui_type' label = 'UI类型'>
              <template slot-scope="scope">
                <el-select v-model="scope.row.ui_type" clearable filterable  placeholder="请选择" @change="changUIType(scope.row)">
                  <el-option
                    v-for="(item,index) in formComponents"
                    :key="index"
                    :label="item.name"
                    :value="item.componentName">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'active' label = '启用'>
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.active"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'width' label = '栏位宽度'>
              <template slot-scope="scope">
                <el-input v-model = "scope.row.width" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'warningTag' label = '控件设置'>
              <template slot-scope="scope">
                <el-button type = "text" size = "mini" @click = "handleUIConfig(scope.row, scope.$index)">
                  <i class = "iconfont icon-fuzaijunheng"></i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column width="auto" align="center" label="操作">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleColumnRemove(scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="保存设定" name="dataSave" v-if="config.other.dataSave">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>数据属性</span>
          </div>
          <div style="padding: 0 0 5px 0">
            <el-radio-group v-model="config.other.dataSave.remoteCategory">
              <el-radio-button label="Meta">元数据表</el-radio-button>
              <el-radio-button label="API">API</el-radio-button>
            </el-radio-group>
          </div>
          <div v-if="config.other.dataSave.remoteCategory === 'Meta'">
            <table-save-meta-config :config.sync="config"></table-save-meta-config>
          </div>
          <div v-if="config.other.dataSave.remoteCategory === 'API'">
            <tableSaveAPIConfig :config.sync="config"></tableSaveAPIConfig>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-drag
      title="控件设置"
      append-to-body
      :closeOnClickModal="false"
      :visible.sync="show_config"
      width="50%"
      class="pop"
      :before-close="handleShowConfigClose">
      <template v-if="configName">
        <component :is="configName" :config.sync="formItem.config" :events.sync="formItem.events"></component>
      </template>
    </el-dialog>
  </baseConfigUI>
</template>
<script>
import baseConfigUI from '../baseConfigUI.vue'
import {formComponents} from '../../data/componentsData'
import tableSourceMetaConfig from '../tableSourceMetaConfig.vue'
import tableSourceAPIConfig from '../tableSourceAPIConfig.vue'
import tableSaveAPIConfig from '../tableSaveAPIConfig.vue'
import tableSaveMetaConfig from '../tableSaveMetaConfig.vue'
import { getComponentByMetaColumnInfo, getComponentByName } from '../common'
import {commonUse_defaultMethod} from '@/components/commonUse'
export default {
  components: {baseConfigUI, tableSourceMetaConfig, tableSourceAPIConfig, tableSaveAPIConfig, tableSaveMetaConfig},
  props: ['config', 'events'],
  data () {
    return {
      formComponents,
      activeName: 'dataSource',
      show_config: false,
      editor: null,
      configName: '',
      formItem: {},
      alltables: [],
      metatables: [],
      metaColumns: [],
      apilist: [],
      conditionOps: [{
        label: '等于',
        value: '$eq'
      }, {
        label: '大于',
        value: '$gt'
      }, {
        label: '大于等于',
        value: '$gte'
      }, {
        label: '小于',
        value: '$lt'
      }, {
        label: '小于等于',
        value: '$lte'
      }, {
        label: '模糊比对',
        value: '$like'
      }, {
        label: 'in',
        value: '$in'
      }],
      orderOptions: [{
        label: '升序',
        value: 'asc'
      }, {
        label: '降序',
        value: 'desc'
      }],
      oldColumns: [],
      oldCategory: ''
    }
  },
  mounted () {
    let self = this
    if (!this.config.other.columns) {
      this.$set(this.config.other, 'columns', [])
    }
    if (!this.config.other.dataSource) {
      this.$set(this.config.other, 'dataSource', {
        remoteCategory: 'Meta'
      })
    }
    if (!this.config.other.dataSave) {
      this.$set(this.config.other, 'dataSave', {
        remoteCategory: 'Meta'
      })
    }
    if (!this.alltables || this.alltables.length <= 0) {
      self.alltables = this.$store.state.commonData.alltables
    }
  },
  methods: {
    handleColumnRemove (index) {
      this.config.other.columns.splice(index, 1)
    },
    addColumns () {
      let c = getComponentByName('TextInput')
      c.config.showLabel = false
      this.config.other.columns.push({
        name: '',
        title: '',
        ui_type: 'TextInput',
        active: true,
        width: 'auto',
        component: c
      })
    },
    changUIType (row) {
      if (!row.ui_type) {
        this.$message.error('请先选择UI类型')
        return false
      }
      row.component = getComponentByName(row.ui_type)
      row.component.config.dataKey = row.name
      row.component.config.showLabel = false
      row.component.config.label = ''
    },
    changName (row) {
      row.component.config.dataKey = row.name
    },
    handleUIConfig (row, index) {
      if (!row.ui_type) {
        this.$message.error('请先选择UI类型')
        return false
      }
      this.formItem = row.component
      this.configName = row.ui_type + 'Config'
      this.show_config = true
    },
    handleShowConfigClose () {
      this.show_config = false
    },
    handleMetaChanged (metainfo, metalist) {
      let self = this
      this.config.other.columns = []
      metainfo.columns.forEach(col => {
        let c = getComponentByMetaColumnInfo(col, metainfo.metauid, self.alltables)
        c.config.showLabel = false
        c.config.label = ''
        c.config.isRequired = false
        this.config.other.columns.push({
          name: col.column_name,
          title: col.column_desc,
          ui_type: c.componentName,
          active: true,
          width: 'auto',
          component: c
        })
      })
    },
    fetchColumnInfo4API () {
      if (this.config.other.dataSource.APISettings.api_uid) {
        this.config.other.columns = []
        this.loadAutoColumnFromAPI()
      }
    },
    handleAPIChanged (apiinfo) {
    },
    loadAutoColumnFromAPI () {
      let settings = this.config.other.dataSource.APISettings
      let parameters = {}
      let self = this
      settings.input_header.forEach(el => {
        parameters[el.key] = commonUse_defaultMethod(el.value, {}, this.getFixedDataObject(), null, this.parentModel)
      })
      settings.input_path.forEach(el => {
        parameters[el.key] = commonUse_defaultMethod(el.value, {}, this.getFixedDataObject(), null, this.parentModel)
      })
      settings.input_querystring.forEach(el => {
        parameters[el.key] = commonUse_defaultMethod(el.value, {}, this.getFixedDataObject(), null, this.parentModel)
      })
      settings.input_postdata.forEach(el => {
        parameters[el.key] = commonUse_defaultMethod(el.value, {}, this.getFixedDataObject(), null, this.parentModel)
      })
      this.$api.excuteDFormEvent(settings.api_uid, {}, parameters).then(data => {
        let list = self.getValueFromDataObjectByKey(settings.dataObject, data)
        if (!list) {
          this.$message.error('获取栏位信息失败，可能原因:返回数据模型未正确设置或该API未正确返回数据集')
          return
        }
        if (list.length > 0) {
          let item = list[0]
          let keys = Object.keys(item)
          keys.forEach(k => {
            let c = getComponentByName('TextInput')
            c.config.showLabel = false
            self.config.other.columns.push({
              name: k,
              title: k,
              ui_type: 'TextInput',
              active: true,
              width: 'auto',
              component: c
            })
          })
        }
      })
    },
    getFixedDataObject () {
      return {
        limit: 1,
        page: 1
      }
    },
    getValueFromDataObjectByKey (key, data) {
      if (!key) return data
      let arr = key.split('.')
      let obj = data
      arr.forEach(key => {
        if (obj && obj[key]) {
          obj = obj[key]
        } else {
          obj = null
        }
      })
      return obj
    }
  },
  watch: {
    'config.other.dataSource.remoteCategory': {
      handler: function (val, oldVal) {
        this.oldCategory = oldVal
      }
    }
  }
}
</script>

<style lang='scss'>
</style>
